
<template>
  <div>
    <ali-header @getAliPanData="getAliPanData" @handleBack="back" />
    <div class="container">
      <ali-left-menu class="mobile left" :file-list="leftFileList" :main-data.sync="mainData" />
      <ali-main-content ref="mainContent" :file-need-password.sync="fileNeedPassword" class="right" :main-data.sync="mainData" :full-file-id-arr.sync="fullFileIdArr" @updateCenterData="updateCenterData" />
    </div>

    <ul class="menu" :style="menuStyle">
      <li @click="openNewTab">在新标签页中打开链接</li>
    </ul>
  </div>
</template>
<script>
// 样式参考：https://pan.rawchen.com/
import AliHeader from '@/views/ali-pan/components/AliHeader.vue'
import AliLeftMenu from '@/views/ali-pan/components/AliLeftMenu.vue'
import AliMainContent from '@/views/ali-pan/components/AliMainContent.vue'
import { getAliPanData, getDuPanFileListLogic } from '@/api/aliPan'
import { NETWORK_DISK_TYPE, NETWORK_DISK_TYPE_OPTIONS } from '@/utils/enum'
import { LEFT_FILE_LIST, makeNetworkDiskConfig } from '@/views/ali-pan/config'
// 记录导航历史
const navigationHistory = []
let currentPosition = -1
export default {
  name: 'Home',
  components: { AliMainContent, AliLeftMenu, AliHeader },
  data() {
    return {
      menuStyle: {},
      leftFileList: makeNetworkDiskConfig(),
      mainData: makeNetworkDiskConfig(),
      fullFileIdArr: [],
      fileNeedPassword: null,
      node: {}
    }
  },
  mounted() {
    if (this.$route.query.root) {
      this.leftFileList[this.$route.query.root].getRootList(this.$route.query, this, this.leftFileList[this.$route.query.root])
    }
    // this.getAliPanData()
    this.$bus.$on('updateCenterData', this.updateCenterData)
    this.$bus.$on('updateMenuStyle', this.updateMenuStyle)
    document.onclick = () => { this.menuStyle = {} }
  },
  created() {
    if (window.history && window.history.pushState) {
      // 监听popstate事件，处理用户通过浏览器的前进和后退按钮导航时的情况
      window.addEventListener('popstate', (event) => {
        window.history.pushState('forward', null, '')
        window.history.forward()
        this.back()
      })
    }
    // 在IE中必须得有这两行
    window.history.pushState('forward', null, '')
    window.history.forward()
  },
  destroyed() {
  },
  methods: {
    openNewTab() {
      const node = this.node; const query = {}
      for (const key in node) {
        if (typeof node[key] !== 'function') {
          query[key] = node[key]
        }
      }
      const routeData = this.$router.resolve({ path: '/', query: query })
      window.open(routeData.href, '_blank')
    },
    updateMenuStyle(style, node) {
      this.menuStyle = style
      this.node = node
    },
    // 获取百度网盘相关的内容
    updateCenterData(payload) {
      this.leftFileList[payload.root].getRootList(payload, this, this.leftFileList[payload.root])
    },
    back() {
      if (this.fullFileIdArr.length > 1) {
        const item = this.fullFileIdArr[this.fullFileIdArr.length - 1]

        if (LEFT_FILE_LIST[item.root] && LEFT_FILE_LIST[item.root].getParentFileDetail) {
          LEFT_FILE_LIST[item.root].getParentFileDetail(item, this, LEFT_FILE_LIST[item.root])
        }
      } else {
        this.mainData = makeNetworkDiskConfig()
        this.fullFileIdArr = []
      }
    },
    navigateForward() {
      if (currentPosition < navigationHistory.length - 1) {
        currentPosition++
        this.navigateToPosition(currentPosition)
      }
    },
    navigateBack() {
      if (currentPosition > 0) {
        currentPosition--
        this.navigateToPosition(currentPosition)
      }
    },
    navigateToPosition(position) {
      const state = navigationHistory[position]
      if (state) {
        window.history.replaceState(state, '', state.url)
        console.log(`Navigated to position ${position}: ${state.url}`)
      }
    },
    navigateTo(url) {
      // 创建新的导航状态
      const newState = { url: url }
      // 将新状态添加到历史记录中
      navigationHistory.push(newState)
      // 更新当前位置
      currentPosition = navigationHistory.length - 1
      // 使用pushState添加新的历史记录条目
      window.history.pushState(newState, '', url)
      // 这里可以执行导航到新位置的其他操作
      console.log(`Navigated to: ${url}`)
    },
    getAliPanData(params) {
      const loading = this.$loading({})
      getAliPanData(params).then((res) => {
        if (this.$refs.mainContent) {
          this.$refs.mainContent.resetFile()
        }
        if (res.code === 0) {
          // if (!params) this.leftFileList = res.data.items
          // this.mainData = res.data.items
          if (this.mainData.length === 0) {
            this.$message.warning('该文件夹没有文件哦~')
          }
        }
      }).finally(() => {
        loading.close()
      })
    },
    handlePopstate(event) {
      if (window.history.state == null) {
        console.log('首次访问页面')
      } else if (window.history.state.forward === true) {
        console.log('前进操作')
      } else if (window.history.state.back === true) {
        console.log('后退操作')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container{
  position: fixed;
  width: 100%;
  height: calc(100% - 3em);
  margin-top: 3em;
}
::v-deep{
  @media screen and (max-width: 500px) {
    #thunder {
      display: none;
    }
  }
}

@media screen and (max-width: 1000px) {
  .left {
    display: none;
  }

  .right {
    width: 100%;
    margin-left: initial;
    overflow: auto;
  }
}
.menu{
  display: none;
  z-index: 3;
  position: fixed;
  background: #fff;
  border: 1px solid transparent;
  box-shadow: 0 2px 5px 1px rgba(64,60,67,.16);
  border-radius: 6px;
  margin: 0 auto;
  list-style: none;
  padding:10px 0;
  li{
    font-size: 13px;
    padding: 3px 20px;
    cursor: pointer;
    &:hover{
      background: #dfe1e5;
    }

  }
}
</style>
